<template>
	<view>
		<u-navbar title="开票记录" @rightClick="rightClick" :placeholder="true" :autoBack="true"></u-navbar>
		<view class="page">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
				@up="upCallback">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="list-top display-f">
						<view class="label">
							开票
						</view>
						<view class="status">
							<view v-if="item.complete == 10" style="color: #152A8B;">开票中</view>
							<view v-else-if="item.complete == 20" style="color: #32B738;">完成</view>
							<view v-else style="color: #FF1212;">失败</view>
						</view>
					</view>
					<view class="list-middle display-f">
						<view class="label">{{item.invoiceScale}}</view>
						<view class="status">{{item.invoiceAmount}}元</view>
					</view>
					<view class="list-bottom display-f">
						<view>开票时间：{{item.invoiceTime}}</view>
						<view>
							<view class="flex-btn">
								<view style="margin: 5rpx;" v-if="item.complete == 20" @click="viewPdf(item)">
									<u-button shape="circle" text="查看" color="#152A8B"></u-button>
								</view>
								<view style="margin: 5rpx;" v-if="item.complete == 20" @click="downloadFile(item)">
									<u-button shape="circle" text="下载" color="#152A8B"></u-button>
								</view>
								<view style="margin: 5rpx;" v-if="item.complete == 30" @click="reOpen(item)">
									<u-button shape="circle" text="重开" color="#152A8B"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
			<view style="height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
	import webUni from "@/common/uni.webview.1.5.2.js";
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				handleList: [],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 10,
					empty: {
						tip: '暂无数据！' // 提示
					},
					textNoMore: '--我也是有底线的--' //没有更多数据的提示文本
				},
				urlParams: this.$store.state.urlParams,
			}
		},
		onLoad() {

		},
		methods: {
			//查询实名信息
			async realAuthDetail() {
				let result = await this.api.realAuthDetail();
				return result.data.data;
			},
			getList(page) {
				let params = {
					pageNum: page.num,
					pageSize: page.size,
					...uni.getStorageSync("urlParams")
				}
				this.api.jietuappsinvoiceList(params).then(res => {
					console.log(res);
					this.handleList = res.data;
					if (this.handleList) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = this.handleList.rows;
						curPageData = JSON.parse(JSON.stringify(curPageData));
						let curPageLen = curPageData.length;
						let totalSize = this.handleList.total;
						// console.log(totalSize);
						setTimeout(() => {
							//设置列表数据
							if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
							this.list = this.list.concat(curPageData); //追加新数据
							console.log(this.list);
							// 请求成功,隐藏加载状态
							this.mescroll.endBySize(curPageLen, totalSize);
							this.isLoading = false;
						}, 500);
					}
				})
			},

			// 上拉or下拉
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				this.getList(page);
			},
			viewPdf(item) {
				console.log(item.url);
				webUni.postMessage({
					data: {
						type: "viewerPdf",
						data: item.url, //data是pdf路径 字符串格式
					},
				})
			},
			downloadFile(item) {
				// console.log(item.url);
				// uni.downloadFile({
				// 	url: item.url,
				// 	success: (res => {
				// 		console.log(res.tempFilePath);
				webUni.postMessage({
					data: {
						type: "viewerPdf",
						data: item.url, //data是pdf路径 字符串格式
					},
				})
				// 	})
				// })


			},
			async reOpen(item) {
				this.realAuthInfo = await this.realAuthDetail();
				if (!this.realAuthInfo || [3, 4].includes(this.realAuthInfo.status)) {
					return uni.$u.toast("开票需完成实名认证，请您先实名认证！");
				}
				this.api.getBackFapiao({
					fapiaoId: item.invoiceId
				}).then(res => {

					let data = res.data.data;
					console.log("data-", data);
					uni.navigateTo({
						url: `/pages/applyInvoice/index?obj=${JSON.stringify(res.data.data)}`
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.page {
		// margin: 100rpx 20rpx 0rpx 20rpx;
		margin: 20rpx;
	}

	// ::v-deep .u-status-bar {
	// 	height: 80rpx !important;
	// }

	.display-f {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 30rpx 5rpx;

		.list-top {
			.label {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				margin: 10rpx;
			}

			.status {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #152A8B;
				line-height: 42rpx;
				margin: 10rpx;
			}
		}

		.list-middle {
			.label {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				margin: 10rpx;
			}

			.status {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #FF1212;
				line-height: 42rpx;
				margin: 10rpx;
			}
		}

		.list-bottom {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			line-height: 33rpx;
			margin: 10rpx;
		}

		.flex-btn {
			display: flex;
		}
	}
</style>